<template>
	<view class="ts-column ts-flex-item">

		<view class="store-images-swiper-box">
			<swiper autoplay interval="3000" circular indicator-dots>
				<swiper-item v-for="(img,index) in product.images" :key="index">
					<view class="store-images-img-box">
						<view class="store-images-img">
							<image :src="img"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="product-info">
			<text>限时特卖</text>
			<text>距离结束仅剩 2天13小时44份11秒</text>
		</view>

		<view class="ts-column ts-padding-left ts-padding-right">
			<view class="ts-row ts-padding-top" style="justify-content: space-between; align-items: center;">
				<view class="ts-row ts-center">
					<text class="ts-text-bold ts-h3 ts-text-red">￥{{product.price/100}}</text>
					<text class="ts-text-discount ts-h4 ts-margin-left">￥{{product.origin_price/100}}</text>
				</view>
				<ts-badge text="热销" type="danger"></ts-badge>
			</view>
			<view class="ts-h5 ts-ellipsis-2 ts-padding-top">{{product.title}}</view>
			<view class="ts-h5 ts-padding-top ts-padding-bottom">{{product.seller_count}}</view>
		</view>
		<view class="ts-gap"></view>
		<ts-segmented-control :values="tabs" v-model="currentTab" style-type="text" active-color="#d81e06" borderColor="#d81e06"></ts-segmented-control>

		<view v-show="currentTab === 0" class="ts-column ts-flex-item">
			<view class="ts-flex ts-column">
				<view v-for="(img,index) in product.graphic_details" :key="index" class="product-detail-image">
					<image :src="img" mode="widthFix" />
				</view>
			</view>
		</view>
		<view v-show="currentTab === 1" class="ts-column ts-flex-item">

		</view>
		<view v-show="currentTab === 2" class="ts-column ts-flex-item">
			<view class="ts-padding">
				<wxParse :content="buyerReading" :imageProp="imageProp" @preview="preview" @navigate="navigate" />
			</view>
		</view>


		<view style="height: 80upx;">
			<!-- 保证底部操作栏目能够显示 -->
		</view>

		<view class="cart-action-row">

			<view style="display: flex; flex:1; flex-direction: row; height: 80upx;">
				<view class="ts-flex ts-row">
					<ts-button type="primary" :height="80" @tap="navigateBack">
						<text>店铺</text>
					</ts-button>
					<ts-button type="warning" :height="80"><text>客服</text></ts-button>
				</view>
				<view class="ts-flex ts-row ts-flex-item">
					<view class="ts-row ts-center ts-flex-item">
						<ts-button type="success" :height="80">
							<text>加入购物车</text>
						</ts-button>
					</view>
					<view class="ts-row ts-center ts-flex-item">
						<ts-button type="danger" :height="80">
							<text>立即购买</text>
						</ts-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var self;

	import tsBadge from 'components/teaset/components/ts-badge.vue';
	import tsSegmentedControl from 'components/teaset/components/ts-segmented-control.vue';
	import tsIcon from 'components/teaset/components/ts-icon.vue';
	import tsButton from 'components/teaset/components/ts-button.vue';

	import marked from 'components/marked/index.js';
	import wxParse from 'components/mpvue-wxparse/src/wxParse.vue';

	export default {
		components: {
			wxParse,

			tsBadge,
			tsSegmentedControl,
			tsIcon,
			tsButton
		},
		data: {
			product: {},
			currentTab: 0,
			product_id: 0,
			store_id: 0,
			tabs: [
				'图文详情',
				'商品参数',
				'购买须知'
			],
			imageProp: {
				// mode:'aspectFill',
				// domain:'http://d1.hucdn.com',
				// domain:''
			},
			buyerReading: '',
		},
		computed: {
			storeUrl() {
				return `store-tab-top?store_id=${this.store_id}`
			}
		},
		onLoad(option) {
			self = this;
			this.$log(option);
			
			this.product_id = option.product_id || 0;
			this.store_id = option.store_id || 0;

			this.init();
			self.getProductInfo();
		},
		onUnload: function() {
			this.currentTab = 0;
		},
		onPullDownRefresh() {
			this.init();
			self.getProductInfo();
		},
		methods: {
			init() {

			},
			getProductInfo() {
				const api = this.$API_BASE + '/app/store/getProductInfo';
				uni.request({
					url: api,
					dataType: 'json',
					method: 'GET',
					data: {
						product_id: self.product_id,
					},
					success(response) {
						const res = response.data;
						self.product = res.data;

						//换换购买须知的Markdown文档为HTML代码
						self.buyerReading = marked(self.product.buyer_reading);

						//停止下拉刷新等待的动画
						uni.stopPullDownRefresh();
					}
				});
			},


			preview(src, e) {
				//图片浏览功能
				console.log('src: ' + src);
			},
			navigateBack() {
				uni.navigateBack({})
			},
			navigate(href, e) {
				//打开链接
				//#ifdef APP-PLUS
				plus.runtime.openURL(href);
				//#endif
				//小程序不支持打开外链
				//#ifdef MP-WEIXIN
				uni.setClipboardData({
					data: href
				});
				//#endif
			}
		},
	}
</script>

<style>
	@import url('../../components/mpvue-wxparse/src/wxParse.css');


	page,
	view {
		display: block;
		/* flex-direction: row; */
	}

	page {
		min-height: 100%;
		font-size: 32upx;
		line-height: 1.6;
	}

	.store-images-swiper-box,
	swiper,
	swiper-item {
		width: 100%;
		height: 750upx;
	}

	.store-images-img-box {
		width: 100%;
		height: 750upx;
		box-sizing: border-box;
		/* padding: 20upx; */
	}

	.store-images-img {
		width: 100%;
		height: 100%;
		background: #4CD964;
		/* border-radius: 20upx; */
		overflow: hidden;
	}

	.store-images-img image {
		width: 100%;
		height: 100%;
	}



	.product-detail-image {
		display: flex;
		flex-direction: column;
		/* height: 750upx; */
		/* padding: 10upx; */
	}

	.product-detail-image image {
		/* height: 100%; */
		width: 100%;
	}

	.product-info {
		display: flex;
		flex-direction: row;
		background-color: #d81e06;
		color: #FFFFFF;
		font-size: 25upx;
		padding: 10upx;
		flex-direction: row;
		justify-content: space-between;
	}

	.product-price-info {
		display: flex;
		flex-direction: row;
		font-size: 25upx;
		padding: 30upx 10upx;
		flex-direction: row;
		align-items: center;
	}

	.product-price-info text {
		margin-right: 20upx;
	}

	.cart-action-row {
		z-index: 1000;
		display: flex;
		flex: 1;
		flex-direction: row;
		position: fixed;
		width: 100%;

		align-items: center;

		justify-content: space-between;
		bottom: 0upx;
		left: 0;

		background-color: #FFFFFF;
		border-top: #C8C7CC solid 1upx;
	}
</style>
